<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- Table Header -->
      <div class="table-header">
        <!-- 左侧 日期和显示详细 -->
        <div style="display: flex; flex-direction: column; align-items: center" v-if="tableData.length !== 0">
          <el-tag type="info">{{ currentWeekRange[0] + "至" + currentWeekRange[1] }}</el-tag>
          <el-switch v-model="showDetails" active-text="显示详细" inactive-text="隐藏详细" size="small" />
          <el-switch v-model="showCurrentWeek" active-text="显示全部" inactive-text="只看当前" size="small" />
        </div>
        <div style="display: flex; flex-direction: column; align-items: center" v-else></div>
        <!-- 中间 周数和周数选择 -->
        <div style="display: flex; flex-direction: column" v-if="!showCurrentWeek">
          <div class="center">
            <el-button @click="weekPre" size="mini" :disabled="weekNum === 1">
              <i class="el-icon-arrow-left"></i>上一周
            </el-button>
            <p>
              {{ currentYear }}年{{ currentMonth.toString().padStart(2, "0") }}月 第{{
                weekNum.toString().padStart(2, "0")
              }}周
            </p>
            <el-button @click="weekNext" size="mini" :disabled="weekNum === 20">
              下一周<i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          <el-slider v-model="_weekNum" :step="1" show-stops :min="1" :max="20" />
        </div>
        <!-- 右侧 学年选择和学期选择 -->
        <div class="schedule-controls">
          <div class="control-group">
            <el-radio-group v-model="routeQuery.selectedYear" @change="loadSchedule" size="small">
              <el-radio-button v-for="year in years" :key="year" :label="year">
                AY{{ year.slice(2) }}-{{ parseInt(year.slice(2)) + 1 }}
              </el-radio-button>
            </el-radio-group>

            <el-radio-group v-model="routeQuery.selectedTerm" @change="loadSchedule" size="small">
              <el-radio-button label="第一学期">第一学期</el-radio-button>
              <el-radio-button label="第二学期">第二学期</el-radio-button>
            </el-radio-group>

            <el-button type="primary" @click="dialogVisible = true" size="small">获取课表</el-button>
          </div>
        </div>
      </div>
      <!-- 课表表格 -->
      <table v-if="tableData.length !== 0">
        <thead style="height: 50px">
          <tr>
            <th class="fixed-width-header">时间</th>
            <th v-for="(day, index) in weekDays" :key="index" class="fixed-width-header">
              {{ day }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <td class="time fixed-width">{{ row.time }}</td>
            <td v-for="(day, dayIndex) in weekDays" :key="dayIndex" class="fixed-width">
              <el-popover v-if="getCourseContent(row, day)" placement="top" width="auto" trigger="hover">
                <template #reference>
                  <div
                    class="course-item"
                    :class="{
                      'not-current-week': !isCurrentWeek(getCourseContent(row, day)) && !showCurrentWeek
                    }"
                    :style="{
                      backgroundColor: getColorByCourseName(getCourseContent(row, day)[0]?.course_name)
                    }"
                    style="height: 100%"
                  >
                    <p>{{ formatCourseContent(getCourseContent(row, day)) }}</p>
                  </div>
                </template>
                <div class="popover-content">
                  <div v-for="content in getCourseContent(row, day)" :key="content.course_name">
                    <h2 style="margin-left: 2px">{{ content.course_name }}</h2>
                    <strong style="margin-left: 2px">课程代码:</strong>
                    {{ courseDictionary[content.course_name] }}<br />
                    <strong style="margin-left: 2px">教学班:</strong> {{ content.course_code }}<br />
                    <strong style="margin-left: 2px">任课老师:</strong> {{ content.course_teacher }}<br />
                    <template v-for="room in content.course_week_room">
                      <el-tag
                        type="success"
                        effect="dark"
                        :style="{
                          borderRadius: '50px',
                          marginRight: '5px',
                          marginBottom: '2px',
                          marginTop: '5px'
                        }"
                      >
                        {{ room.course_room }}
                      </el-tag>
                      <el-tag
                        type="info"
                        effect="dark"
                        :style="{
                          borderRadius: '50px',
                          marginRight: '5px',
                          marginBottom: '2px',
                          marginTop: '5px'
                        }"
                      >
                        {{ room.course_weeks.join(", ") }}
                      </el-tag>
                      <br />
                    </template>
                    <hr style="height: 1.5px; border-width: 0; color: gray; background-color: gray" />
                  </div>
                </div>
              </el-popover>
            </td>
          </tr>
        </tbody>
      </table>
      <template v-else>
        <el-empty :image-size="200" description="无" />
      </template>
    </el-card>

    <!-- 获取课表对话框 -->
    <el-dialog title="获取课表" v-model="dialogVisible" width="30%" :center="true" :show-close="false">
      <el-form style="padding: 0 20px">
        <el-form-item label="学年">
          <el-select v-model="routeQuery.selectedYear" placeholder="请选择学年">
            <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学期">
          <el-select v-model="routeQuery.selectedTerm" placeholder="请选择学期">
            <el-option label="第一学期" value="第一学期"></el-option>
            <el-option label="第二学期" value="第二学期"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学号">
          <el-input v-model="routeQuery.studentId" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="hardUpdate">强制更新</el-checkbox>
          <el-checkbox v-model="rememberMe" v-if="hardUpdate">记住密码</el-checkbox>
          <el-space fill style="width: 100%; margin-top: 10px" v-if="hardUpdate">
            <el-alert type="info" :closable="false" size="small">
              <div class="declaration-content">
                <div class="declaration-section">
                  <h4>数据缓存及使用声明</h4>
                  <ol class="declaration-list">
                    <li>
                      <p>授权数据范围及用途：</p>
                      <div class="usage-items">
                        <div class="usage-item">
                          <span class="highlight">课表数据</span>
                          <span class="usage-desc">用于无课表生成、课表规划、课程推荐</span>
                        </div>
                        <div class="usage-item">
                          <span class="highlight">成绩数据</span>
                          <span class="usage-desc">用于课程通过率分析（课程代码/名称、教师名称、成绩等级）</span>
                        </div>
                      </div>
                    </li>
                    <li>
                      <p>信息安全承诺：</p>
                      <ul class="security-list">
                        <li>不存储MySeig系统登录凭据（密码等敏感信息仅用于当次认证）</li>
                        <li>认证参数进行对称加密传输</li>
                        <li>不向第三方披露任何MySeig系统原始数据</li>
                        <li>统计分析采用不可逆脱敏处理（提取关键字段，不可溯源）</li>
                      </ul>
                    </li>
                  </ol>
                </div>
                <div class="declaration-section">
                  <h4>注意</h4>
                  <p>
                    <span class="highlight">记住密码</span>功能仅将MySeig系统密码加密后存储于浏览器本地。 启用<span
                      class="highlight"
                      >强制更新</span
                    >后，平台将直接从MySeig系统获取相关数据， 否则为读取后台数据库中的缓存数据。
                  </p>
                </div>
              </div>
            </el-alert>
          </el-space>
        </el-form-item>
        <el-form-item label="密码" v-if="hardUpdate">
          <el-input
            type="password"
            v-model="routeQuery.password"
            show-password
            placeholder="请输入MySeig系统密码"
            autocomplete="new-password"
            @keyup.enter="fetchSchedule"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="fetchSchedule"
            >获取课表</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted, watch } from "vue";
  import { ElMessage, ElLoading } from "element-plus";
  import api from "../axios/api";
  import { encrypt, decrypt } from "../utils/crypto";

  const weekDays = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
  const tableData = ref([]); // 课表数据
  const weekNum = ref(0); // 当前周数
  const _weekNum = ref(0); // 当前周数
  const firstWeekDate = ref(""); // 课表第一周日期
  const currentYear = ref(""); // 当前年份
  const currentMonth = ref(""); // 当前月份
  const currentWeekRange = ref([]); // 当前星期范围
  const showDetails = ref(false); // 是否显示详细
  const showCurrentWeek = ref(true); // 是否只看当前周
  const dialogVisible = ref(false); // 是否显示对话框
  const fullscreenLoading = ref(false); // 是否全屏加载
  const rememberMe = ref(localStorage.getItem("rememberMe") === "true"); // 是否记住密码
  const hardUpdate = ref(false); // 是否强制更新
  const routeQuery = ref({
    studentId: localStorage.getItem("studentId") || "",
    password: localStorage.getItem("studentPw") ? decrypt(localStorage.getItem("studentPw") || "") : "",
    selectedYear: ``,
    selectedTerm: ""
  });
  const number_2 = Number(routeQuery.value.studentId.slice(0, 2));
  const years = ref([`20${number_2}`, `20${number_2 + 1}`, `20${number_2 + 2}`, `20${number_2 + 3}`]);
  const colorList = [
    "#252322",
    "#74663b",
    "#783930",
    "#ae4137",
    "#7f7063",
    "#424458",
    "#12203B",
    "#DE7A60",
    "#F4A261",
    "#9BC1BC",
    "#5D576B",
    "#344E41"
  ];

  const colorMap = {}; // 用于存储课程名称和颜色的映射关系
  let colorIndex = 0; // 当前分配的颜色索引

  const getColorByCourseName = courseName => {
    if (!colorMap[courseName]) {
      // 如果课程名称没有分配颜色，从颜色列表中分配一个
      colorMap[courseName] = colorList[colorIndex % colorList.length];
      colorIndex++; // 分配下一个颜色
    }
    return colorMap[courseName];
  };

  const roomColorMap = {}; // 用于存储上课地点和颜色的映射关系
  let roomColorIndex = 0; // 当前分配的颜色索引

  const getColorByRoom = room => {
    if (!roomColorMap[room]) {
      // 如果上课地点没有分配颜色，从颜色列表中分配一个
      roomColorMap[room] = colorList[roomColorIndex % colorList.length];
      roomColorIndex++; // 分配下一个颜色
    }
    return roomColorMap[room];
  };

  // 加载课表数据
  const loadSchedule = () => {
    const storedData = JSON.parse(localStorage.getItem("tableData") || "[]");
    const selectedData = storedData.find(
      item =>
        item.year_term.year === routeQuery.value.selectedYear.toString() &&
        item.year_term.semester === (routeQuery.value.selectedTerm.toString() === "第一学期" ? "1" : "2")
    );
    if (selectedData) {
      tableData.value = selectedData.schedules;
      if (selectedData.week_info) {
        firstWeekDate.value = new Date(selectedData.week_info.week_start_date.replace(/年|月/g, "-").replace("日", ""));
      } else {
        firstWeekDate.value = new Date();
      }
      initData(firstWeekDate.value);
    } else {
      tableData.value = [];
      if (
        routeQuery.value.studentId === "" ||
        routeQuery.value.selectedYear === "" ||
        routeQuery.value.selectedTerm === ""
      ) {
        ElMessage.warning("未找到对应学年的课表数据");
        dialogVisible.value = true;
      } else {
        fetchSchedule();
      }
    }
  };

  // 格式化日期
  const formatDate = (year, month, day) => {
    const y = year;
    let m = month < 10 ? `0${month}` : month;
    let d = day < 10 ? `0${day}` : day;
    return `${y}-${m}-${d}`;
  };

  // 初始化数据
  const initData = cur => {
    const date = cur ? new Date(cur) : new Date();
    const currentDay = date.getDate();
    currentYear.value = date.getFullYear();
    currentMonth.value = date.getMonth() + 1;
    const currentWeek = date.getDay() || 7;

    const str = formatDate(currentYear.value, currentMonth.value, currentDay);
    const days = [];

    // 计算当前一周的日期
    for (let i = currentWeek - 1; i >= 0; i--) {
      const d = new Date(str);
      d.setDate(d.getDate() - i);
      days.push(d);
    }

    for (let i = 1; i <= 7 - currentWeek; i++) {
      const d = new Date(str);
      d.setDate(d.getDate() + i);
      days.push(d);
    }

    // 更新当前星期范围
    currentWeekRange.value = [
      formatDate(days[0].getFullYear(), days[0].getMonth() + 1, days[0].getDate()),
      formatDate(days[6].getFullYear(), days[6].getMonth() + 1, days[6].getDate())
    ];

    // 将日期信息添加到 weekDays 中
    if (!showCurrentWeek.value) {
      const dataArr = days.map(item => `${item.getMonth() + 1}/${item.getDate()}`);
      weekDays.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"].map(
        (day, index) => `${day}(${dataArr[index]})`
      );
    } else {
      weekDays.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    }

    // 计算当前 cur 是 firstWeekDate 的第几周
    const diffTime = cur - firstWeekDate.value;
    if (diffTime < 0) {
      weekNum.value = 0;
    } else {
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      weekNum.value = Math.floor(diffDays / 7) + 1;
    }
  };

  watch(showCurrentWeek, newVal => {
    initData(firstWeekDate.value);
  });

  const weekPre = () => {
    _weekNum.value = weekNum.value - 1;
    const d = new Date(currentWeekRange.value[0]);
    d.setDate(d.getDate() - 7);
    initData(d);
  };

  const weekNext = () => {
    _weekNum.value = weekNum.value + 1;
    const d = new Date(currentWeekRange.value[1]);
    d.setDate(d.getDate() + 7);
    initData(d);
  };
  // 监听_weekNum的变化，并模拟 weekPre 和 weekNext
  watch(_weekNum, newVal => {
    if (newVal < weekNum.value) {
      weekPre();
    } else if (newVal > weekNum.value) {
      weekNext();
    }
  });
  // 更新课程内容
  const getCourseContent = (row, day) => {
    const dayMap = {
      周一: "monday",
      周二: "tuesday",
      周三: "wednesday",
      周四: "thursday",
      周五: "friday",
      周六: "saturday",
      周日: "sunday"
    };
    const key = dayMap[day.split("(")[0]]; // 去掉日期部分，只保留星期
    return row[key];
  };

  // 周次格式化
  const formatWeeks = weeks => {
    // 转成数字
    weeks = weeks.map(Number);
    if (weeks.length === 0) return "";
    if (weeks.length === 1) return `第${weeks[0]}周`;

    // 对周次进行排序
    weeks.sort((a, b) => a - b);

    const isSingleWeek = weeks.every((week, index, arr) => {
      // 如果是第一个元素则跳过
      if (index === 0) return true;
      // 判断是否为连续单周
      return week === arr[index - 1] + 2 && arr[index - 1] % 2 === 1;
    });

    const isDoubleWeek = weeks.every((week, index, arr) => {
      // 如果是第一个元素则跳过
      if (index === 0) return true;
      // 判断是否为连续双周
      return week === arr[index - 1] + 2 && arr[index - 1] % 2 === 0;
    });

    const start = weeks[0];
    const end = weeks[weeks.length - 1];

    if (isSingleWeek) {
      return `${start}-${end}周（单周）`;
    } else if (isDoubleWeek) {
      return `${start}-${end}周（双周）`;
    } else if (weeks.length === end - start + 1) {
      return `${start}-${end}周`;
    } else {
      return `第${weeks.join(",")}周`;
    }
  };

  // 格式化课程内容
  const formatCourseContent = contents => {
    if (!contents) return "";

    if (!showDetails.value) {
      // 删除为空的元素后，contents 列表内每一个元素的 course_name 用 、拼接
      const formattedCourses = contents
        .map(item => {
          if (
            item.course_week_room.some(weekRoom => weekRoom.course_weeks.includes(weekNum.value.toString())) ||
            showCurrentWeek.value
          ) {
            return item.course_name;
          }
        })
        .filter(Boolean); // 过滤掉空值
      return formattedCourses.length >= 2
        ? formattedCourses.map(course => `【${course}】`).join("\n")
        : formattedCourses.join("\n");
    }
    const formattedCourses = contents
      .map(item => {
        if (
          item.course_week_room.some(weekRoom => weekRoom.course_weeks.includes(weekNum.value.toString())) ||
          showCurrentWeek.value
        ) {
          return `${item.course_name} (${item.course_code} ${item.course_teacher} ${item.course_week_room
            .map(weekRoom => weekRoom.course_weeks)
            .map(formatWeeks)
            .join("、")} ${item.course_week_room
            .map(weekRoom => weekRoom.course_room)
            .map(room => `[${room}]`)
            .join("、")})`;
        }
      })
      .filter(Boolean); // 过滤掉空值
    return formattedCourses.length >= 2
      ? formattedCourses.map(course => `【${course}】`).join("\n")
      : formattedCourses.join("\n");
  };

  const isCurrentWeek = contents => {
    if (!contents) return false;
    return contents.some(content =>
      content.course_week_room.some(weekRoom => weekRoom.course_weeks.includes(weekNum.value.toString()))
    );
  };

  // 获取课表
  const fetchSchedule = async () => {
    if (
      routeQuery.value.studentId === "" ||
      // routeQuery.value.password === '' ||
      routeQuery.value.selectedYear === "" ||
      routeQuery.value.selectedTerm === ""
    ) {
      ElMessage.warning("请填写完整信息");
      return;
    }

    const loading = ElLoading.service({
      lock: true,
      text: "加载中...",
      background: "rgba(0, 0, 0, 0.7)"
    });

    fullscreenLoading.value = true;

    try {
      const res = await api.getSchedule(
        routeQuery.value.studentId,
        routeQuery.value.password,
        routeQuery.value.selectedYear,
        routeQuery.value.selectedTerm === "第一学期" ? "1" : "2",
        hardUpdate.value
      );
      console.log(res);
      if (res.status === 200) {
        const newData = {
          week_info: res.data.week_info,
          schedules: res.data.schedules,
          year_term: res.data.year_term
        };

        let storedData = JSON.parse(localStorage.getItem("tableData") || "[]");
        const foundIndex = storedData.findIndex(
          item =>
            item.year_term.year === newData.year_term.year && item.year_term.semester === newData.year_term.semester
        );

        if (foundIndex !== -1) {
          storedData[foundIndex] = newData;
        } else {
          storedData.push(newData);
        }
        // 排序
        storedData.sort((a, b) => a.year_term.year - b.year_term.year || a.year_term.semester - b.year_term.semester);

        localStorage.setItem("tableData", JSON.stringify(storedData));
        localStorage.setItem("userInfo", JSON.stringify(res.data.personal_info));

        window.dispatchEvent(
          new CustomEvent("localStorageChange", {
            detail: { key: "userInfo", value: res.data.personal_info }
          })
        );

        ElMessage.success("课表获取成功");
        dialogVisible.value = false;

        if (rememberMe.value && routeQuery.value.password) {
          localStorage.setItem("studentId", routeQuery.value.studentId);
          localStorage.setItem("studentPw", encrypt(routeQuery.value.password));
          localStorage.setItem("rememberMe", rememberMe.value.toString());
        }

        loadSchedule();
      } else {
        ElMessage.error("课表更新失败");
      }
    } catch (error) {
      dialogVisible.value = true;
      hardUpdate.value = true;
    } finally {
      loading.close();
      fullscreenLoading.value = false;
    }
  };
  const today = new Date();
  const getYearAndSemester = () => {
    let year = today.getFullYear();
    const month = today.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要加1
    let semester;
    if (month >= 9 && month <= 12) {
      semester = 1;
    } else {
      year -= 1;
      semester = 2;
    }
    return { year: year.toString(), semester: semester.toString() };
  };
  const year_term = ref(getYearAndSemester());
  const courseDictionary = ref({});
  onMounted(() => {
    if (localStorage.getItem("rememberMe") === "true") {
      rememberMe.value = true;
    }
    const urlParams = new URLSearchParams(window.location.search);
    const yearFromUrl = urlParams.get("y");
    const termFromUrl = urlParams.get("s");

    if (yearFromUrl && termFromUrl) {
      routeQuery.value.selectedYear = yearFromUrl;
      routeQuery.value.selectedTerm = termFromUrl === "1" ? "第一学期" : "第二学期";
    } else if (years.value.length > 0) {
      routeQuery.value.selectedYear = year_term.value.year;
      routeQuery.value.selectedTerm = year_term.value.semester === "1" ? "第一学期" : "第二学期";
    }
    loadSchedule();
    courseDictionary.value = getCourseDictionary();
  });

  // 实现提取逻辑
  const getCourseDictionary = () => {
    const courseDict = {};
    const data = JSON.parse(localStorage.getItem("personal_course_data") || "{}");
    if (JSON.stringify(data) === "{}") {
      return courseDict;
    }
    // 处理必修课
    data.bixiu.forEach(course => {
      courseDict[course.name] = course.code;
    });

    // 处理选修课
    data.xuanxiu.forEach(course => {
      courseDict[course.name] = course.code;
    });

    // 处理通识课
    data.zxianxuan.forEach(course => {
      courseDict[course.name] = course.code;
    });

    return courseDict;
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
  }

  table {
    width: 100%;
    background-color: #fff;
    border-color: #e3e8ee;
    text-align: center;
    border-radius: 4px;
    border-top: 1px solid #e3e8ee;
    border-left: 1px solid #e3e8ee;
    table-layout: fixed; /* 固定表格布局 */
  }

  th,
  td {
    border-bottom: 1px solid #e3e8ee;
    border-right: 1px solid #e3e8ee;
    text-align: center;
    box-sizing: border-box;
    padding: 6px;
  }

  th {
    height: 30px;
    background-color: #f3f3f3;
    color: #525252;
    font-weight: bold;
  }

  .time {
    background: #f7f7f7;
    color: #707070;
    font-weight: bold;
    white-space: pre-line; /* 支持换行符 */
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    box-sizing: border-box;
    //padding: 10px;

    .center {
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        font-size: 20px;
        margin: 0 30px;
      }
    }
  }

  .course-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    background: #318bff;
    height: 78px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 10px 0;

    p {
      color: #fff;
      white-space: pre-line; // 保留换行符
    }
  }

  /* 固定列宽 */
  .fixed-width {
    width: 120px; /* 根据需要调整宽度 */
    height: 80px;
    font-size: 15px;
  }

  .fixed-width-header {
    width: 120px; /* 根据需要调整宽度 */
    height: 50px;
  }

  .not-current-week {
    opacity: 0.2; // 或者 background-color: #f0f0f0; 等样式
  }

  .schedule-controls {
    .control-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;

      .el-radio-group {
        display: flex;
        justify-content: center;
        width: 320px; // 设置固定宽度

        :deep(.el-radio-button__inner) {
          padding: 8px 15px;
        }

        :deep(.el-radio-button) {
          flex: 1; // 让按钮平分宽度

          .el-radio-button__inner {
            width: 100%; // 让按钮内容占满分配的空间
          }
        }
      }

      .el-button {
        width: 320px; // 与radio-group相同宽度
      }
    }
  }

  .popover-content {
    h4 {
      margin: 0;
      font-size: 16px;
      color: #333;
    }
    hr {
      margin: 5px 0;
      border: none;
      border-top: 1px solid #eee;
    }
    p {
      margin: 5px 0;
      font-size: 14px;
      color: #555;
    }
  }
  .el-dialog .el-dialog__header {
    text-align: center;
  }

  .declaration-content {
    .declaration-section {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }

      h4 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #303133;
        font-weight: 600;
      }

      ol {
        margin: 0;
        padding-left: 20px;

        li {
          margin-bottom: 8px;
          line-height: 1.5;
          font-size: 13px;
          color: #606266;

          &:last-child {
            margin-bottom: 0;
          }

          ul {
            margin: 4px 0 0 0;
            padding-left: 20px;

            li {
              margin-bottom: 2px;
            }
          }
        }
      }

      p {
        margin: 0;
        line-height: 1.5;
        font-size: 13px;
        color: #606266;
      }

      .highlight {
        color: #409eff;
        font-weight: 500;
      }
    }
  }
</style>
